<template>
  <el-dialog
    title="用户分配"
    :visible.sync="this.$store.state.userShow"
    width="50%"
    :lock-scroll="false"
		:before-close="rolesDialogClose"
		@close="rolesClose"
  >
    <div>
      <p>当前用户: {{usersfpList.username}}</p>
      <p>当前角色: {{usersfpList.role_name}}</p>
    </div>
    <el-select v-model="value" placeholder="请选择">
      <el-option v-for="item in rolesList" :key="item.id" :label="item.roleDesc" :value="item.id"></el-option>
    </el-select>
    <span slot="footer">
      <el-button @click="closeClick">取 消</el-button>
      <el-button type="primary" @click="setRoles">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {setRoles} from 'network/homelist'
export default {
  props: {
    usersfpList: {
      type: Object,
      default() {
        return {};
      }
		},
		rolesList : {
			type : Array,
			default(){
				return []
			}
		}
  },
  data() {
    return {
			value : ''
		};
  },
  methods: {
    closeClick() {
      this.$store.commit("closeUserShow");
		},
		rolesDialogClose(){
			this.$store.commit("closeUserShow");
		},
		setRoles(){
			if(!this.value){
				this.$Message.error('请选择角色！')
			}
			setRoles(`/users/${this.usersfpList.id}/role`,{rid : this.value}).then(res => {
				if(res.data.meta.status !== 200){
					this.$Message.error(res.data.meta.msg)
				}else{
					this.$emit('setRoles',res)
				}
				
			})
		},
		rolesClose(){
			this.value = ''
		}
  }
};
</script>
<style lang="less" scoped>
.el-dialog{
	p{
		margin: 20px 0;
	}
}
</style>